<script setup>
import {successCode} from "@/api/httpApi/base/http.js";
import {onMounted, ref} from "vue";
import MyTable from "@/components/constant/myTable.vue";
import {addCommand, delCommand, getCommandList, startCommandAdmin, updateCommand} from "@/api/httpApi/commandApi.js";
import MySelect from "@/components/constant/mySelect.vue";
import {getMapList} from "@/api/httpApi/mapApi.js";
import {constantStore} from "@/stores/constantStore.js";
import {error, warning} from "@/api/myMessage.js";
import {ElMessage, ElMessageBox} from 'element-plus'

onMounted(() => {
  initTerminal();
})

let commandList = ref({});
let mapList = ref({});
let mapSelect = ref([]);

function initTerminal() {
  getCommandList().then((res) => {
    if (res.code === successCode) {
      commandList.value = res.data;
    }
  })

  getMapList().then((res) => {
    if (res.code === successCode) {
      mapList.value = res.data.content;
      mapSelect.value = constantStore().listToSelect(mapList.value, "name", "id");
    }
  })
}

/**
 * 初始化相关
 */
let commandMapping = [
  {
    label: "ID",
    prop: "id",
    propConfig: {
      align: "center",
      width: "180",
      type: "text",
    },
  },
  {
    label: "指令名称",//表头名称 必填
    prop: "name",//数据对应字段 必填
    propConfig: {
      align: "center",//对齐方式 非必填 不写默认左对齐
      type: "text",// 非必填 不写默认text   text(文本) selectText(根据给定列表，选择内容)  tag(标签)  Switch(开关)  image(图片)
      fixed: 'left',//固定列的位置
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text"
    },
  },
  {
    label: "指令",
    prop: "commandValue",
    propConfig: {
      align: "center",
      width: "300",
      type: "text",
      fixed: 'left',//固定列的位置
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text"
    },
  },
  {
    label: "指令描述",//表头名称 必填
    prop: "description",//数据对应字段 必填
    propConfig: {
      align: "center",//对齐方式 非必填 不写默认左对齐
      type: "text",// 非必填 不写默认text   text(文本) selectText(根据给定列表，选择内容)  tag(标签)  Switch(开关)  image(图片)
      fixed: 'left',//固定列的位置
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text"
    }
  },
  {
    label: "创建时间",
    prop: "createTime",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
  },
  {
    label: "最近修改时间",
    prop: "updateTime",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
  },
  {
    label: "备 注",
    prop: "remarks",
    propConfig: {
      align: "center",
      width: "400",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
      require: true,
      labelWidth: "100"
    },
  },
]

let startDialog = ref(false);
let selectMap = ref(true);

let thisCommandId = "";
let thisTerminalId = ref("");

function startBtnBefore(index, item) {
  startDialog.value = true;
  thisCommandId = item.id;
}

function startBtnCancel() {
  startDialog.value = false;
  thisTerminalId.value = "";
  thisCommandId = "";
}

let startBtnDisabled = ref(false);
function startBtnDo() {
  if (thisTerminalId.value === null || thisTerminalId.value === "") {
    warning("请选择服务器");
    return;
  }
  startBtnDisabled.value = true;
  startCommandAdmin(thisCommandId, thisTerminalId.value).then((res) => {
    if (res.code === successCode) {
      ElMessageBox.alert(res.data, '指令返回信息', {
        confirmButtonText: '关 闭'
      })
    } else {
      error(res.message);
    }
    startDialog.value = false;
    startBtnDisabled.value = false;
  })
}
</script>

<template>
  <div class="terminal-box">
    <div class="terminal-table-box">
      <my-table :data-list="commandList"
                @after-edit="initTerminal()"
                :add-action="(command) => { return addCommand(command)}"
                :update-action="(command) => { return updateCommand(command)}"
                :del-action="(command) => { return delCommand(command)}"
                :edit-btn-width="300"
                title="指令设置"
                :mapping="commandMapping">
        <template #tableBtnAdd="scope">
          <el-button size="small" type="success"
                     @click="startBtnBefore(scope.index,scope.row)">
            执 行
          </el-button>
        </template>
      </my-table>
    </div>
    <div class="terminal-dialog-box">
      <el-dialog v-model="startDialog" title="选择服务器" width="500">
        <div class="select-terminal-box">
          <div class="select-terminal-title">

          </div>
          <div class="select-terminal-content">
            <template v-if="selectMap">
              <div class="select-label">
                选择地图服务器：
              </div>
              <div class="select value">
                <my-select :select-model="thisTerminalId"
                           @change-value="args => thisTerminalId = args"
                           placeholder="请选择服务器" :option="mapSelect"/>
              </div>
            </template>
            <template v-else>

            </template>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="startBtnCancel()">取 消</el-button>
            <el-button type="primary" @click="startBtnDo" :disabled="startBtnDisabled">
              执 行
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">

.select-terminal-content {
  display: flex;
  align-items: center;
}

</style>